<nz-modal
  nzClassName="custom-model-wrap makeup-setup-modle"
  [nzWidth]="900"
  [nzFooter]="null"
  [(nzVisible)]="isMakeVisible"
  [nzTitle]="'加价设置'"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-spin [nzSpinning]="isSpinning">
        <!-- S 下单时 -->
        <div class="makeup-wrap">
          <p class="makeup-title">下单时</p>
          
          <div class="makeup-promotion-wrap">
            <p class="makeup-subtitle">
              加价促销
            </p>

            <ng-container *ngIf="modalData?.frontPromotionInfoList?.length;else templateEmpty1">
              <nz-radio-group
                class="makeup-activity-ul"
                [(ngModel)]="radioValue"
                [nzDisabled]="setupDisabled"
              >
                <ng-container *ngFor="let item of modalData?.frontPromotionInfoList">
                  <label
                    nz-radio
                    [nzValue]="item.radioValue"
                  >
                    <!-- {{ item.name }} 加价{{ returnMakeupPrice(item) }}元 -->
                    {{ item.showCopy }}，单台机器回收价满 {{ item?.orderLimitMoney || '0' }} 元，加价 {{ item?.limitSmall || '0' }}
                    <span *ngIf="item.type === 2">%，最高加价 {{ item?.limitBig || '0' }} 元</span>
                    <span *ngIf="item.type === 1">元</span>
                  </label>
                </ng-container>
              </nz-radio-group>
            </ng-container>

            <ng-template #templateEmpty1>
              <nz-empty></nz-empty>
            </ng-template>
          </div>

          <div class="makeup-coupon-wrap">
            <p class="makeup-subtitle">
              加价券
            </p>

            <ng-container *ngIf="modalData?.frontMarkUpRecycleCouponInfoVOList?.length;else templateEmpty2">
              <nz-radio-group
                class="makeup-coupon-ul"
                [(ngModel)]="radioValue"
                [nzDisabled]="setupDisabled"
              >
                <ng-container *ngFor="let item of modalData?.frontMarkUpRecycleCouponInfoVOList">
                  <label
                    nz-radio
                    [nzValue]="item.radioValue">
                    <dl class="makeup-dl">
                      <dt>
                        <b class="dt-name">{{ item.name }}</b>
                        <span class="dt-time">
                          {{ item.useBeginTime || '----' }} ~ {{ item.useEndTime || '----' }}
                        </span>
                        <span
                          class="dt-info"
                          nz-tooltip
                          [nzTooltipPlacement]="['topLeft', 'leftTop']"
                          [nzTooltipTitle]="item.useDesc || '-'">
                          详细信息
                          <i nz-icon nzType="info-circle" nzTheme="outline"></i>
                        </span>
                      </dt>
                      <dd>
                        <b class="dd-num">
                          + {{ item.limitSmall }}<span *ngIf="item.type === 2">%</span>
                        </b>
                        <span class="dd-tj">满 {{ item.orderLimitMoney }} 可用</span>
                      </dd>
                    </dl>
                  </label>
                </ng-container>
              </nz-radio-group>
            </ng-container>

            <ng-template #templateEmpty2>
              <nz-empty></nz-empty>
            </ng-template>
          </div>
        </div>
        <!-- E 下单时 -->

        <!-- S 下单后 -->
        <div class="makeup-wrap">
          <p class="makeup-title">下单后</p>
          
          <div class="makeup-promotion-wrap">
            <p class="makeup-subtitle">
              加价促销
            </p>

            <ng-container *ngIf="modalData?.afterPromotionInfoList?.length;else templateEmpty3">
              <nz-radio-group
                class="makeup-activity-ul"
                [(ngModel)]="radioValue"
                [nzDisabled]="setupDisabled"
              >
                <ng-container *ngFor="let item of modalData?.afterPromotionInfoList">
                  <label
                    nz-radio
                    [nzValue]="item.radioValue"
                  >
                  {{ item.showCopy }}，单台机器回收价满 {{ item?.orderLimitMoney || '0' }} 元，加价 {{ item?.limitSmall || '0' }}
                  <span *ngIf="item.type === 2">%，最高加价 {{ item?.limitBig || '0' }} 元</span>
                  <span *ngIf="item.type === 1">元</span>
                  </label>
                </ng-container>
              </nz-radio-group>
            </ng-container>

            <ng-template #templateEmpty3>
              <nz-empty></nz-empty>
            </ng-template>
          </div>
          
          <div class="makeup-coupon-wrap">
            <p class="makeup-subtitle">
              加价券
            </p>

            <ng-container *ngIf="modalData?.afterMarkUpRecycleCouponInfoVOList?.length;else templateEmpty4">
              <nz-radio-group
                class="makeup-coupon-ul"
                [(ngModel)]="radioValue"
                [nzDisabled]="setupDisabled"
              >
                <ng-container *ngFor="let item of modalData?.afterMarkUpRecycleCouponInfoVOList">
                  <label
                    nz-radio
                    [nzValue]="item.radioValue">
                    <dl class="makeup-dl">
                      <dt>
                        <b class="dt-name">{{ item.name }}</b>
                        <span class="dt-time">
                          {{ item.useBeginTime || '----' }} ~ {{ item.useEndTime || '----' }}
                        </span>
                        <span
                          class="dt-info"
                          nz-tooltip
                          [nzTooltipPlacement]="['topLeft', 'leftTop']"
                          [nzTooltipTitle]="item.useDesc || '-'">
                          详细信息
                          <i nz-icon nzType="info-circle" nzTheme="outline"></i>
                        </span>
                      </dt>
                      <dd>
                        <b class="dd-num">
                          + {{ item.limitSmall }}<span *ngIf="item.type === 2">%</span>
                        </b>
                        <span class="dd-tj">满 {{ item.orderLimitMoney }} 可用</span>
                      </dd>
                    </dl>
                  </label>
                </ng-container>
              </nz-radio-group>
            </ng-container>
            <ng-template #templateEmpty4>
              <nz-empty></nz-empty>
            </ng-template>
          </div>
        </div>
        <!-- E 下单后 -->
      </nz-spin>
    </div>

    <div class="custom-model-foot" *ngIf="!setupDisabled">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" [nzLoading]="setupLoading" (click)="submitCoupon()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>